<template>
	<view>
		<view class="header">
			<view class="title">访客列表</view>
		</view>

		<view class="content">
			<scroll-view scroll-y="true" @scrolltolower="loadData" class="scroll-view">
				<view v-for="(item, index) in visitorList" :key="index" class="visitor-card" @click="goDetail(item)">
					<view class="card-header">
						<view class="user-info">
							<image :src="item.avatar_url" class="avatar"></image>
							<view class="info">
								<view class="nickname">{{item.nickname}}</view>
								<view class="name-phone">
									<text>{{item.name || '--'}}</text>
									<text class="divider">|</text>
									<text class="phone" @click.stop="makePhoneCall(item.phone)">{{item.phone || '--'}}</text>
								</view>
							</view>
							<view class="status" :class="{'paid': item.pay_status === 2}">
								{{item.pay_status === 2 ? '已支付' : '未支付'}}
							</view>
						</view>
					</view>
					<view class="card-content">
						<view class="stats-row">
							<view class="stat-item">
								<text class="label">访问次数</text>
								<text class="value">{{item.visit_count || 0}}</text>
							</view>
							<view class="stat-item">
								<text class="label">最近访问</text>
								<text class="value">{{item.visit_time || '--'}}</text>
							</view>
						</view>
						<view class="source-info" v-if="item.clerk_nickname">
							<text class="label">溯源员工：</text>
							<text class="value">{{item.clerk_nickname}}</text>
						</view>
						<view class="join-time">
							<text class="label">参与时间：</text>
							<text class="value">{{item.join_time || '--'}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/staff'
	import storage from '@/utils/storage'
	
	export default {
		data() {
			return {
				activityId: 0,
				visitorList: [],
				// 分页参数
				page: 1,
				page_size: 10,
				hasMore: true
			}
		},
		onLoad() {
			this.activityId = storage.get('activityId')
			this.loadData()
		},
		methods: {
			loadData() {
				// 如果没有更多数据，直接返回
				if (!this.hasMore) return
				
				api.getVisitorList({
					activity_id: this.activityId,
					page: this.page,
					page_size: this.page_size
				}).then(res => {
					if (res.code === 200) {
						// 如果是第一页，直接赋值
						if (this.page === 1) {
							this.visitorList = res.data
						} else {
							// 否则追加数据
							this.visitorList = [...this.visitorList, ...res.data]
						}
						
						// 判断是否还有更多数据
						this.hasMore = res.data.length === this.page_size
						// 页码加1
						if (this.hasMore) {
							this.page++
						}
					}
				})
			},
			// 跳转到详情页
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/staff/visitorDetail?user_id=${item.user_id}`
				})
			},
			// 拨打电话
			makePhoneCall(phone) {
				if (!phone) return
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						console.log('拨打电话成功')
					},
					fail: (err) => {
						console.log('拨打电话失败', err)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F7FB;
	}

	.header {
		background-color: #FFAC3E;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 250rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.header > .title {
		color: #fff;
		padding: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.content {
		position: relative;
		margin-top: 140rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.scroll-view {
		height: calc(100vh - 140rpx - 40rpx);
	}

	.visitor-card {
		width: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.visitor-card:active {
		transform: scale(0.98);
		opacity: 0.9;
	}

	.card-header {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 24rpx;
		border: 2rpx solid #f0f0f0;
	}

	.info {
		flex: 1;
	}

	.nickname {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.name-phone {
		font-size: 26rpx;
		color: #999;
	}

	.name-phone .divider {
		margin: 0 10rpx;
	}
	
	.name-phone .phone {
		color: #2979ff;
		text-decoration: underline;
	}

	.status {
		font-size: 24rpx;
		color: #FF6B6B;
		padding: 6rpx 20rpx;
		border-radius: 24rpx;
		background-color: rgba(255, 107, 107, 0.1);
	}

	.status.paid {
		color: #4CAF50;
		background-color: rgba(76, 175, 80, 0.1);
	}

	.card-content {
		padding-top: 20rpx;
	}

	.stats-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		margin: 0 10rpx;
	}

	.stat-item:first-child {
		margin-left: 0;
	}

	.stat-item:last-child {
		margin-right: 0;
	}

	.stat-item .label {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 6rpx;
	}

	.stat-item .value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.source-info, .join-time {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
		padding: 0 10rpx;
	}

	.source-info .label, .join-time .label {
		color: #999;
		margin-right: 8rpx;
	}
</style> 